<template>
  <div class="test-table" ref="tableContainer">
    <div class="mode-checkboxes">
      <label class="mode-checkbox">
        <input type="radio" v-model="currentMode" value="visitor" name="mode" />
        <span>游客模式</span>
      </label>
      <label class="mode-checkbox">
        <input type="radio" v-model="currentMode" value="admin" name="mode" />
        <span>管理员模式</span>
      </label>
    </div>

    <div class="table-header-wrapper">
      <table ref="headerTable" class="header-table">
        <colgroup>
          <col style="width: 40px" v-show="adminMode" />
          <col v-for="header in headers" :key="header.key" :style="{ width: header.width + 'px' }" v-show="header.key !== 'operation' || adminMode" />
        </colgroup>
        <thead>
          <tr>
            <th class="checkbox-header" @mouseenter="showHeaderCheckbox" @mouseleave="hideHeaderCheckbox" v-show="adminMode">
              <div class="custom-checkbox" v-show="showHeaderCheckboxes" @click="handleSelectAllChange">
                <span v-if="selectAll" class="checkbox-icon checked">✓</span>
                <span v-else-if="indeterminate" class="checkbox-icon indeterminate">─</span>
                <span v-else class="checkbox-icon unchecked">○</span>
              </div>
            </th>
            <th v-for="(header, index) in headers" :key="header.key" class="resizable-header" :ref="el => { if (el) headerRefs[index] = el; }" v-show="header.key !== 'operation' || adminMode">
              <div class="header-content">{{ header.label }}</div>
              <div 
                v-if="index < headers.length - 1 && header.key !== 'operation'"
                class="resize-handle" 
                @mousedown="startResize($event, index)"
              ></div>
            </th>
          </tr>
        </thead>
      </table>
    </div>

    <div class="table-body-wrapper" ref="tableBodyWrapper" @scroll="onTableScroll">
      <table ref="bodyTable" class="body-table">
        <colgroup>
          <col style="width: 40px" v-show="adminMode" />
          <col v-for="header in headers" :key="header.key" :style="{ width: header.width + 'px' }" v-show="header.key !== 'operation' || adminMode" />
        </colgroup>
        <tbody>
          <tr v-for="(row, rowIndex) in rows" :key="rowIndex" @mouseenter="showCheckbox(rowIndex)" @mouseleave="hideCheckbox(rowIndex)">
            <td class="checkbox-cell" v-show="adminMode">
              <div class="custom-checkbox" v-show="shouldShowCheckbox(rowIndex)" @click="handleRowCheckboxChange(rowIndex)">
                <span v-if="selectedRows[rowIndex]" class="checkbox-icon checked">✓</span>
                <span v-else class="checkbox-icon unchecked">○</span>
              </div>
            </td>
            <td v-for="header in headers" :key="header.key" v-show="header.key !== 'operation' || adminMode">
              <span v-if="header.key === 'operation'">
                <button class="text-button" @click="handleOperation(rowIndex)">操作</button>
              </span>
              <span v-else>{{ row[header.key] }}</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <div v-if="showOperationDialog" class="operation-dialog">
      <div class="dialog-content">
        <h3>{{ currentOperation }}操作</h3>
        <p>您正在对第{{ currentRowIndex + 1 }}行数据进行操作</p>
        <div class="row-data" v-if="currentRowData">
          <template v-for="(value, key) in currentRowData" :key="key">
            <div class="data-item" v-if="key !== 'operation'">
              <label class="data-label">{{ getHeaderLabel(key) }}:</label>
              <input 
                v-model="editableRowData[key]" 
                class="data-input" 
                :placeholder="value"
              />
            </div>
          </template>
        </div>
        <div class="dialog-buttons">
          <button @click="confirmOperation" class="confirm-btn">确认</button>
          <button @click="closeOperationDialog" class="cancel-btn">取消</button>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'operationTable',
  data() {
    return {
      currentMode: 'visitor',
      selectAll: false,
      showHeaderCheckboxes: false,
      indeterminate: false,
      selectedRows: {},
      showCheckboxes: {},
      currentRowData: null,
      editableRowData: {},
      headers: [
        { 
          label: '姓名', 
          key: 'name', 
          width: 120
        },
        { 
          label: '年龄', 
          key: 'age', 
          width: 80
        },
        { 
          label: '城市', 
          key: 'city',
          width: 100
        },
        { 
          label: '职业', 
          key: 'job',
          width: 120
        },
        { 
          label: '学历', 
          key: 'education',
          width: 100
        },
        { 
          label: '工作经验', 
          key: 'experience',
          width: 120
        },
        { 
          label: '薪资', 
          key: 'salary',
          width: 100
        },
        { 
          label: '部门', 
          key: 'department',
          width: 120
        },
        { 
          label: '入职日期', 
          key: 'hireDate',
          width: 120
        },
        { 
          label: '状态', 
          key: 'status',
          width: 100
        },
        { 
          label: '操作', 
          key: 'operation',
          width: 80
        }
      ],
      rows: [
        { 
          name: '张三', 
          age: '25', 
          city: '北京', 
          job: '工程师', 
          education: '本科', 
          experience: '3年', 
          salary: '15K', 
          department: '技术部', 
          hireDate: '2020-01-15', 
          status: '在职',
          operation: '操作'
        },
        { 
          name: '李四', 
          age: '30', 
          city: '上海', 
          job: '设计师', 
          education: '硕士', 
          experience: '5年', 
          salary: '20K', 
          department: '设计部', 
          hireDate: '2019-03-22', 
          status: '在职',
          operation: '操作'
        },
        { 
          name: '王五', 
          age: '28', 
          city: '广州', 
          job: '产品经理', 
          education: '本科', 
          experience: '4年', 
          salary: '18K', 
          department: '产品部', 
          hireDate: '2020-07-10', 
          status: '在职',
          operation: '操作'
        },
        { 
          name: '赵六', 
          age: '32', 
          city: '深圳', 
          job: '运营', 
          education: '本科', 
          experience: '6年', 
          salary: '16K', 
          department: '运营部', 
          hireDate: '2018-11-05', 
          status: '在职',
          operation: '操作'
        },
        { 
          name: '钱七', 
          age: '27', 
          city: '杭州', 
          job: '数据分析师', 
          education: '硕士', 
          experience: '2年', 
          salary: '14K', 
          department: '数据部', 
          hireDate: '2021-02-18', 
          status: '在职',
          operation: '操作'
        },
        { 
          name: '孙八', 
          age: '29', 
          city: '成都', 
          job: '测试工程师', 
          education: '本科', 
          experience: '4年', 
          salary: '15K', 
          department: '技术部', 
          hireDate: '2020-05-30', 
          status: '在职',
          operation: '操作'
        },
        { 
          name: '周九', 
          age: '31', 
          city: '武汉', 
          job: 'UI设计师', 
          education: '硕士', 
          experience: '6年', 
          salary: '19K', 
          department: '设计部', 
          hireDate: '2018-09-12', 
          status: '在职',
          operation: '操作'
        },
        { 
          name: '吴十', 
          age: '26', 
          city: '西安', 
          job: '前端工程师', 
          education: '本科', 
          experience: '2年', 
          salary: '13K', 
          department: '技术部', 
          hireDate: '2021-08-25', 
          status: '在职',
          operation: '操作'
        },
        { 
          name: '张三', 
          age: '25', 
          city: '北京', 
          job: '工程师', 
          education: '本科', 
          experience: '3年', 
          salary: '15K', 
          department: '技术部', 
          hireDate: '2020-01-15', 
          status: '在职',
          operation: '操作'
        },
        { 
          name: '李四', 
          age: '30', 
          city: '上海', 
          job: '设计师', 
          education: '硕士', 
          experience: '5年', 
          salary: '20K', 
          department: '设计部', 
          hireDate: '2019-03-22', 
          status: '在职',
          operation: '操作'
        },
        { 
          name: '王五', 
          age: '28', 
          city: '广州', 
          job: '产品经理', 
          education: '本科', 
          experience: '4年', 
          salary: '18K', 
          department: '产品部', 
          hireDate: '2020-07-10', 
          status: '在职',
          operation: '操作'
        },
        { 
          name: '赵六', 
          age: '32', 
          city: '深圳', 
          job: '运营', 
          education: '本科', 
          experience: '6年', 
          salary: '16K', 
          department: '运营部', 
          hireDate: '2018-11-05', 
          status: '在职',
          operation: '操作'
        },
        { 
          name: '钱七', 
          age: '27', 
          city: '杭州', 
          job: '数据分析师', 
          education: '硕士', 
          experience: '2年', 
          salary: '14K', 
          department: '数据部', 
          hireDate: '2021-02-18', 
          status: '在职',
          operation: '操作'
        },
        { 
          name: '孙八', 
          age: '29', 
          city: '成都', 
          job: '测试工程师', 
          education: '本科', 
          experience: '4年', 
          salary: '15K', 
          department: '技术部', 
          hireDate: '2020-05-30', 
          status: '在职',
          operation: '操作'
        },
        { 
          name: '周九', 
          age: '31', 
          city: '武汉', 
          job: 'UI设计师', 
          education: '硕士', 
          experience: '6年', 
          salary: '19K', 
          department: '设计部', 
          hireDate: '2018-09-12', 
          status: '在职',
          operation: '操作'
        },
        { 
          name: '吴十', 
          age: '26', 
          city: '西安', 
          job: '前端工程师', 
          education: '本科', 
          experience: '2年', 
          salary: '13K', 
          department: '技术部', 
          hireDate: '2021-08-25', 
          status: '在职',
          operation: '操作'
        }
      ],
      headerRefs: [],
      resizing: false,
      startX: 0,
      startWidthLeft: 0,
      startWidthRight: 0,
      leftIndex: -1, 
      rightIndex: -1,
      showOperationDialog: false,
      currentOperation: '',
      currentRowIndex: -1
    };
  },
  computed: {
    visitorMode() {
      return this.currentMode === 'visitor';
    },
    adminMode() {
      return this.currentMode === 'admin';
    },
    showOperationColumn() {
      return this.adminMode;
    }
  },
  mounted() {
    document.addEventListener('mousemove', this.onMouseMove);
    document.addEventListener('mouseup', this.onMouseUp);
  },
  beforeUnmount() {
    document.removeEventListener('mousemove', this.onMouseMove);
    document.removeEventListener('mouseup', this.onMouseUp);
  },
  methods: {
    showHeaderCheckbox() {
      this.showHeaderCheckboxes = true;
    },
    hideHeaderCheckbox() {
      if (!this.hasSelectedRows() && !this.selectAll) {
        this.showHeaderCheckboxes = false;
      }
    },
    handleSelectAllChange() { 
      if (this.indeterminate) {
        this.selectAll = true;
        this.indeterminate = false;
        this.showHeaderCheckboxes = true;
        for (let i = 0; i < this.rows.length; i++) {
          this.selectedRows[i] = true;
          this.showCheckboxes[i] = true;
        }
      } else if (this.selectAll) {
        this.selectAll = false;
        this.indeterminate = false;
        this.showHeaderCheckboxes = false;
        for (let i = 0; i < this.rows.length; i++) {
          this.selectedRows[i] = false;
          this.showCheckboxes[i] = false;
        }
      } else {
        this.selectAll = true;
        this.indeterminate = false;
        this.showHeaderCheckboxes = true;
        for (let i = 0; i < this.rows.length; i++) {
          this.selectedRows[i] = true;
          this.showCheckboxes[i] = true;
        }
      }
      this.selectedRows = { ...this.selectedRows };
      this.showCheckboxes = { ...this.showCheckboxes };
    },
    showCheckbox(rowIndex) {
      this.showCheckboxes = { ...this.showCheckboxes, [rowIndex]: true };
    },
    hideCheckbox(rowIndex) {
      if (!this.selectedRows[rowIndex] && !this.selectAll) {
        this.showCheckboxes = { ...this.showCheckboxes, [rowIndex]: false };
      }
    },
    shouldShowCheckbox(rowIndex) {
      const hasSelected = this.hasSelectedRows();
      if (hasSelected) {
        this.showHeaderCheckboxes = true;
      }
      return this.selectAll || hasSelected || this.showCheckboxes[rowIndex];
    },
    hasSelectedRows() {
      return Object.values(this.selectedRows).some(selected => selected);
    },
    
    handleRowCheckboxChange(rowIndex) {
      for (let i = 0; i < this.rows.length; i++) {
        if (this.selectedRows[i] === undefined) {
          this.selectedRows[i] = false;
        }
      }
      
      this.selectedRows[rowIndex] = !this.selectedRows[rowIndex];
      
      const selectedValues = Object.values(this.selectedRows);
      const allSelected = selectedValues.every(selected => selected);
      const hasSelected = selectedValues.some(selected => selected);
      
      this.selectAll = allSelected;
      this.indeterminate = !allSelected && hasSelected;
      
      if (!hasSelected && !this.selectAll) {
        this.showHeaderCheckboxes = false;
      } else if (hasSelected) {
        this.showHeaderCheckboxes = true;
      }
      
      this.selectedRows = { ...this.selectedRows };
      this.showCheckboxes = { ...this.showCheckboxes };
    },
    handleOperation(rowIndex) {
      this.currentOperation = '操作';
      this.currentRowIndex = rowIndex;
      this.currentRowData = this.rows[rowIndex];
      
      this.editableRowData = { ...this.rows[rowIndex] };
      
      this.showOperationDialog = true;
    },
    getHeaderLabel(key) {
      const header = this.headers.find(h => h.key === key);
      return header ? header.label : key;
    },
    closeOperationDialog() {
      this.showOperationDialog = false;
      this.currentOperation = '';
      this.currentRowIndex = -1;
      this.currentRowData = null;
      this.editableRowData = {};
    },
    confirmOperation() {
      if (this.currentRowIndex >= 0 && this.currentRowIndex < this.rows.length) {
        const operationValue = this.rows[this.currentRowIndex].operation;
        this.rows.splice(this.currentRowIndex, 1, { 
          ...this.editableRowData, 
          operation: operationValue 
        });
      }
      this.closeOperationDialog();
      
      this.selectedRows = { ...this.selectedRows };
    },
    startResize(event, index) {
      this.resizing = true;
      this.leftIndex = index;
      this.rightIndex = index + 1;
      this.startX = event.clientX;
      this.startWidthLeft = this.headers[this.leftIndex].width;
      this.startWidthRight = this.headers[this.rightIndex].width;
      
      event.preventDefault();
    },
    
    onMouseMove(event) {
      if (!this.resizing) return;
      
      document.body.classList.add('resizing');
      
      const diff = event.clientX - this.startX;
      
      const totalWidth = this.startWidthLeft + this.startWidthRight;
      let newWidthLeft = this.startWidthLeft + diff;
      let newWidthRight = this.startWidthRight - diff;
      
      if (newWidthLeft < 50) {
        newWidthLeft = 50;
        newWidthRight = totalWidth - 50;
      } else if (newWidthRight < 50) {
        newWidthRight = 50;
        newWidthLeft = totalWidth - 50;
      }
      
      this.headers[this.leftIndex].width = newWidthLeft;
      this.headers[this.rightIndex].width = newWidthRight;
    },
    
    onMouseUp() {
      if (this.resizing) {
        this.resizing = false;
        this.leftIndex = -1;
        this.rightIndex = -1;
        
        document.body.classList.remove('resizing');
      }
    },
    
    onTableScroll(event) {
      if (this.$refs.headerTable) {
        this.$refs.headerTable.style.transform = `translateX(${-event.target.scrollLeft}px)`;
      }
    }
  }
};
</script>

<style scoped>
.test-table {
  background: #333;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

.table-header-wrapper {
  overflow: hidden;
  flex-shrink: 0;
  background: #2d2d2d;
}

.header-table {
  width: 100%;
  border-collapse: collapse;
  color: #e0e0e0;
  table-layout: fixed;
}

.table-body-wrapper {
  overflow-x: auto;
  overflow-y: scroll; 
  flex-grow: 1;
  margin-top: -1px; 
  max-height: 400px; 
  
  &::-webkit-scrollbar {
    width: 0px; 
    height: 12px;
    background-color: #2d2d2d;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-track {
    background-color: #2d2d2d;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 6px;
    border: 2px solid #2d2d2d;
    
    &:hover {
      background-color: #777;
    }
  }

  &::-webkit-scrollbar-corner {
    background-color: #2d2d2d;
  }
}

.body-table {
  width: 100%;
  border-collapse: collapse;
  color: #e0e0e0;
  table-layout: fixed;
}

th,
td {
  padding: 12px 10px;
  text-align: left;
  border-bottom: 1px solid #444;
  border-right: 1px solid #444;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}

th:last-child,
td:last-child {
  border-right: none;
}

th {
  color: white;
  font-weight: bold;
  position: relative;
  user-select: none;
  border-right: 1px solid #444;
  background: #2d2d2d;
}

tr:hover {
  background-color: #3a3a3a;
}

.resizable-header {
  padding: 0;
}

.header-content {
  padding: 12px 15px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resize-handle {
  position: absolute;
  top: 0;
  right: -5px;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  z-index: 1;
}

body.resizing {
  cursor: col-resize;
}

.checkbox-header,
.checkbox-cell {
  width: 40px;
  text-align: center;
  padding: 12px 0;
}

.checkbox-cell input[type="checkbox"] {
  cursor: pointer;
}

.custom-checkbox {
  display: inline-block;
  width: 18px;
  height: 18px;
  cursor: pointer;
  position: relative;
  background: #333;
  border: 1px solid #555;
  border-radius: 3px;
}

.checkbox-icon {
  display: inline-block;
  width: 100%;
  height: 100%;
  line-height: 18px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 3px;
}

.checkbox-icon.checked {
  background-color: #409eff;
  color: white;
}

.checkbox-icon.indeterminate {
  background-color: #409eff;
  color: white;
}

.checkbox-icon.unchecked {
  border: 1px solid #dcdfe6;
  color: transparent;
}

.mode-checkboxes {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
  padding: 10px 0;
}

.mode-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #e0e0e0;
  font-size: 14px;
}

.mode-checkbox input[type="checkbox"] {
  margin-right: 8px;
  transform: scale(1.2);
  cursor: pointer;
}

.text-button {
  background: none;
  border: none;
  color: #409eff;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  text-decoration: underline;
}

.text-button:hover {
  color: #66b1ff;
}

.operation-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog-content {
  background-color: #2d2d2d;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  min-width: 400px;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  border: 1px solid #444;
}

.dialog-content::-webkit-scrollbar {
  width: 8px;
}

.dialog-content::-webkit-scrollbar-track {
  background: #2a2a2a;
  border-radius: 4px;
}

.dialog-content::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 4px;
}

.dialog-content::-webkit-scrollbar-thumb:hover {
  background: #666;
}

.dialog-content h3 {
  margin-top: 0;
  color: #e0e0e0;
}

.dialog-content p {
  color: #aaa;
  margin-bottom: 20px;
}

.row-data {
  margin: 20px 0;
  padding: 15px;
  background-color: #3a3a3a;
  border-radius: 4px;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #444;
}

.row-data::-webkit-scrollbar {
  width: 6px;
}

.row-data::-webkit-scrollbar-track {
  background: #333;
  border-radius: 3px;
}

.row-data::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 3px;
}

.row-data::-webkit-scrollbar-thumb:hover {
  background: #666;
}

.data-item {
  display: flex;
  margin-bottom: 15px;
  padding: 8px 0;
  border-bottom: 1px solid #444;
  align-items: center;
}

.data-item:last-child {
  border-bottom: none;
}

.data-label {
  font-weight: bold;
  min-width: 80px;
  color: #e0e0e0;
  margin-right: 10px;
}

.data-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #555;
  border-radius: 4px;
  background-color: #333;
  color: #e0e0e0;
  font-size: 14px;
}

.data-input:focus {
  outline: none;
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.confirm-btn,
.cancel-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.confirm-btn {
  background-color: #409eff;
  color: white;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #333;
}
</style>